<template>
	<view :class="currentTheme">
		<a-nabbar name="发车管理"/>
		<view class="u-padding-left-32 u-padding-right-32 u-padding-top-20 u-padding-bottom-20">
			<item-box padding="49">
				<item-number-list :list="historyList"></item-number-list>
			</item-box>
		</view>
		<view class="content">
			<view class="sticky-tabs  u-padding-left-32 u-padding-right-32 u-flex u-row-center" :style="{top:top}">
				<me-tabs v-model="indexCurrent" @tabTop="getTabTop" :height="88" :tabWidth="220" :tabs="tabs" @change="tabGetChange" activeColor="#765CFE"></me-tabs>
			</view>
			<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
				<swiper-item  v-for="(a,b) in tabs" :key="b" >
					<mescroll-item :tabIndex="b" :tab="a" :inputName="name"  ref="mescroll"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<fixed-team btnText="预约发车" @btnClick="appointment"></fixed-team>
	</view>
</template>

<script>
	import swiperList from '@/mixins/swiperList.js'
	import MescrollItem from "./swiperItem.vue";
	import pageMixins from '@/pages/pageMixins.js'
	import carManager from '@/mixins/carManager.js'
	import imageNumber from '@/components/imageNumber/imageNumber.vue'
	import itemNumberList from '@/components/itemNumberList/itemNumberList.vue'
	export default {
		mixins:[swiperList,pageMixins,carManager],
		computed: {
			historyList() {
				return [{
					text:'已发车次',
					count:this.loginForm.driveCarCount
				},{
					text:'已毁车次',
					count:this.loginForm.destroyedCount
				}]
			}
		},
		data() {
			return {
				tabs:[
					{name:'未发车', list: null, num:0, y:0,curPageLen:0, type:0, hasNext:true,showEnrollTime:0,userType:this.isAuth},
					{name:'开放上车', list: null, num:0, y:0,curPageLen:0, type:0, hasNext:true,showEnrollTime:1,userType:this.isAuth},
					{name:'已完成', list: null, num:0, y:0, curPageLen:0,type:2, hasNext:true,showEnrollTime:1,userType:this.isAuth}
				],
				otherHeight:'240rpx',
				name:'',
				//需要每次重新刷新的tabIndex 可配置多个参数  如：1,2   意思是 哪些tab在页面显示的时候需要主动触发刷新
				showRefreshTabIndex:"1",
			}
		},
		components: {
			MescrollItem,itemNumberList
		},
		onShow() {
			this.valiDateMixin('issue')
			this.getInfo()
		},
		methods: {
			getInfo(){
				if(this.token) this.$store.dispatch("getInfo"); //更新用户信息
			},
			appointment() {
				this.$u.route({
					url:'/pagesA/goonLarpManager/appointment'
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.right-count-content{
		&::after{
			content: "";
			position: absolute;
			width: 1rpx;
			height: 44rpx;
			background-color: rgba(26, 26, 26, 0.15);
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.tag-box{
		flex-wrap: wrap;
		.tag-item{
			width:33.33%;
			.tag-title{
				display: block;
				margin:10rpx;
				text-align: center;
				font-size: 24rpx;
				box-sizing: border-box;
				padding: 0 10rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 50rpx;
				border-radius: 10rpx;
				color: var(--theme-color);
				border: 1px solid var(--theme-color);
				&.checked-tag-title{
					background-color: var(--theme-color);
					color: white;
				}
			}
		}
	}
	.tag-btn-view{
		height: 120rpx;
	}
	.tag-btns{
		justify-content: flex-end;
		bottom: 0;
		right: 0;
		left: 0;
		padding: 32rpx;
		background-color: var(--submit-bar-background-color);
		.tag-btn{
			width: 140rpx;
			line-height: 60rpx;
			color: white;
			text-align: center;
			font-size: 22rpx;
			&.right-btn{
				background: #5643B9;
				border-color: #5643B9;
				border-radius: 0 var(--goods-action-button-border-radius,20px) var(--goods-action-button-border-radius,20px) 0;
			}
			&.left-btn{    
				background: #765CFE;
				border-color: #765CFE;
				border-radius: var(--goods-action-button-border-radius,20px) 0 0 var(--goods-action-button-border-radius,20px);
			}
		}
	}
	.sticky-tabs{
		z-index: 990;
		position: sticky;
	}
	.btn-style{
		width: 200rpx;
		line-height: 70rpx;
		text-align: center;
		margin: 0 auto;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: #765CFE;
		color: white;
	}
</style>